<template>
	<view class="morecourse">
		<u-navbar
			title="乐推学院"
			:back-icon-size="28"
			back-icon-color="#000000"
			:title-size="28"
			:border-bottom="false"
			:back-text-style="{ color: '#000000', fontSize: '26rpx' }"
			title-color="#000000"
			:custom-back="goback"
			:background="{ background: '#ffffff' }"
		></u-navbar>
		<view class="more_top">
			<view class="barbox"><u-subsection :list="topbarlist" :height="72" :bold="false" :current="curNow" @change="sectionChange"></u-subsection></view>
		</view>
		<view v-if="curNow == 0">
			<u-cell-group>
				<u-cell-item v-for="(v,i) in baseClass" :key="i" icon="integral-fill" :title="v.name" @click="gonext(2)"></u-cell-item>
			</u-cell-group>
		</view>
		<view v-if="curNow == 1">
			<u-cell-group>
				<u-cell-item v-for="(v,i) in skillClass" :key="i" icon="integral-fill" :title="v.name" @click="gonext(2)"></u-cell-item>
			</u-cell-group>
		</view>
		<view v-if="curNow == 2">
			<u-cell-group>
				<u-cell-item v-for="(v,i) in practiceClass" :key="i" icon="integral-fill" :title="v.name" @click="gonext(2)"></u-cell-item>
			</u-cell-group>
		</view>
	</view>
</template>

<script>
export default {
	name: 'morecourse',
	data() {
		return {
			curNow: 0,
			curNow2: 0,
			curNow3: 0,
			topbarlist: [
				{
					name: '基础'
				},
				{
					name: '技能'
				},
				{
					name: '实操'
				}
			],
			baseClass: [
				{
					name: '走进乐推联盟—曹华'
				},
				{
					name: '了解客服和运营—汪灵丽'
				},
				{
					name: '淘宝基础知识—汪灵丽'
				},
				{
					name: '简单了解工作性质—汪灵丽'
				},
				{
					name: '推广环节的组成形式—汪灵丽'
				},
				{
					name: '乐推招商系统的功能简介—汪灵丽'
				}
			],
			skillClass: [
				{
					name: '查找商家联系方式的几种方法—汪灵丽'
				},
				{
					name: '淘宝客服具体工作流程—汪灵丽'
				},
				{
					name: '认识了解首单礼金—汪灵丽'
				},
				{
					name: '首单礼金常见问题解析—汪灵丽'
				},
				{
					name: '如何玩转首单礼金—汪灵丽'
				},
				{
					name: '淘礼金和AA爆款操作方式—汪灵丽'
				}
			],
			practiceClass: [
				{
					name: '招商系统产品上单步骤—曹华'
				},
				{
					name: '首单礼金自行上单操作步骤—汪灵丽'
				},
				{
					name: '如何开通并提取报名链接—汪灵丽'
				},
				{
					name: '乐推共用链接注意事项—汪灵丽'
				},
				{
					name: '招商系统其他常用功能介绍—汪灵丽'
				},
				{
					name: '虚拟截图的制作方法—汪灵丽'
				}
			]
		};
	},
	//实例创建完成后被立即调用
	created() {},
	onLoad(option) {},
	//挂载开始之前被调用
	beforeMount() {},
	onPullDownRefresh() {
		//监听下拉刷新动作的执行方法，每次手动下拉刷新都会执行一次
		console.log('refresh');
		setTimeout(function() {
			uni.stopPullDownRefresh(); //停止下拉刷新动画
		}, 1000);
	},
	//初次渲染完成
	onReady() {},
	//全局只触发一次
	onLaunch() {},
	//从后台进入前台
	onShow() {},
	//前台进入后台
	onHide() {},
	methods: {
		gonext(index) {
			// console.log(index);
			switch (index) {
				case 1:
					uni.navigateTo({
						url: '/pages/college/morecourse/morecourse',
						animationType: 'pop-in',
						animationDuration: 300
					});
					break;
			}
		},
		goback() {
			uni.navigateBack({
				delta: 1,
				animationType: 'pop-out',
				animationDuration: 200
			});
		},
		sectionChange2(index) {
			console.log(index);
		},
		sectionChange3(index) {
			console.log(index);
		},
		sectionChange(index) {
			this.curNow = index;
			console.log(this.curNow);
			if (index == 0) {
				this.botbarlist = [
					{
						name: '基础'
					},
					{
						name: '技能'
					},
					{
						name: '实操'
					}
				];
			} else {
				this.botbarlist = [
					{
						name: '团建'
					},
					{
						name: '拓展'
					}
				];
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.morecourse {
	.more_top {
		width: 100%;
		height: 162rpx;
		background-color: #eeeeef;
		display: flex;
		justify-content: center;
		align-items: center;
		.barbox {
			width: 672rpx;
			margin: 0 auto;
			border-width: 2rpx;
			border-color: #bbbbbb;
			border-style: solid;
			border-radius: 16rpx;
			overflow: hidden;
		}
	}
	.botbar::v-deep {
		.u-subsection {
			padding: 0 !important;
		}
		.u-item {
			padding: 0 !important;
		}
		.u-item-bg {
			height: 96% !important;
			border-radius: 0 !important;
			bottom: 0 !important;
		}
	}
}
</style>
